<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
    <div class="container">
        <!--导航栏-->
        <div class="navigationBar"></div>

        <!--对应界面-->
        <div class="col-md-10" id="userPostBarDiv">
            <div class="col-md-12" style="border: 1px solid black">
                <div class="col-md-12" style="height: 20px"></div>

                <!--提示栏-->
                <label class="col-md-6" style="font-size: 15px; height: 25px; color: #555555" id="tip"></label>

                <!--显示贴吧列表-->
                <div class="col-md-12" id="postBarList"></div>

                <!--显示翻页器-->
                <div class="row">
                    <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="priorPage()">上一页</button>
                    <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
                    <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="nextPage()">下一页</button>
                </div>
                <div class="col-md-12" style="height: 20px"></div>

            </div>
        </div>
    </div>

    <script type="text/javascript">
        let postBarList = $("#postBarList");
        var totalNumber, page = 1, maxPage;
        let user;

        // 引入导航栏
        $(".navigationBar").load("navigationBar.html", function (){
            $("#userPostBar").css("color", "red");
        });

        // 请求得到用户信息
        $.ajaxSettings.async = false;
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            user = data;
            getPostBarNumber();
            getPagePostBar();
        }, "json");
        $.ajaxSettings.async = true;

        // 请求得到绑定用户创建的贴吧的总数
        function getPostBarNumber() {
            totalNumber = user.userPostBarNumber;
            $("#tip").html("贴吧总数：" + totalNumber + " 个");

            if (totalNumber > 0) {
                maxPage = Math.floor((parseInt(totalNumber) - 1) / 8) + 1;
            } else {
                maxPage = 1;
            }
            $("#pageLabel").html("1 / " + maxPage);
        }

        // 请求得到所有创建的贴吧的信息
        function getPagePostBar() {
            $.post("/QG_PostBar/postBar?method=getAllPostBarByPage", {"userId": user.userId, "page": page, "num": 8}, function (data){
                // 先清空列表
                postBarList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴吧对象
                    const postBar = data[key];
                    // 获取贴吧的吧主后，将标签添加进来
                    $.get("/QG_PostBar/user?method=getUserById", {"userId": postBar.userId}, function (user){
                        addItem(postBarList, "/QG_PostBar/postBar?method=getPostBarById&postBarId=" +postBar.postBarId,
                            postBar.postBarName, "简介：" + postBar.postBarResume, user.userName, postBar.createDate);
                    }, "json");
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        function priorPage() {
            if (page - 1 > 0){
                page--;
                $("#pageLabel").html(page + " / " + maxPage);
                getPagePostBar();
            }
        }

        function nextPage() {
            if (page + 1 <= maxPage) {
                page++;
                $("#pageLabel").html(page + " / " + maxPage);
                getPagePostBar();
            }
        }

    </script>
</body>
</html>